<template>
    <view :class="'l-class steps-container ' + ('steps-container-' + direction)">
        <slot />
    </view>
</template>

<script>
import lIcon from '../icon/index';
import lStep from '../step/index';
import validator from '../behaviors/validator';
export default {
    unicomGroup: ['step'],
    data() {
        return {};
    },
    externalClasses: ['l-class'],
    mixins: [validator],
    options: {
        multipleSlots: true
    },
    relations: {
        '../step/index': {
            type: 'child',
            linked() {
                this._initSteps();
            },
            unlinked() {
                this._initSteps();
            }
        }
    },
    props: {
        direction: {
            type: String,
            default: 'row',
            options: ['row', 'column']
        },
        activeIndex: {
            type: Number,
            default: 0
        },
        color: String,
        stepMinHeight: {
            type: String,
            default: '120'
        },
        status: {
            type: String,
            default: 'process',
            options: ['process', 'error']
        },
        dot: Boolean
    },
    watch: {
        activeIndex: function () {
            this._initSteps();
        }
    },
    methods: {
        _initSteps() {
            uni.createSelectorQuery()
                .in(this)
                .select('.steps-container')
                .boundingClientRect()
                .exec((t) => {
                    let e = this.getRelationNodes('step');
                    this.length = e.length;
                    if (this.length > 0) {
                        e.forEach((e, i) => {
                            e.updateDataChange({
                                index: i,
                                ...this,
                                stepsWidth: t[0].width
                            });
                        });
                    }
                });
        }
    },
    created: function () {}
};
</script>
<style>
.steps-container {
    display: flex;
    width: 100%;
}
.steps-container-row {
    flex-direction: row;
}
.steps-container-column {
    flex-direction: column;
}
</style>
